<template>
  <el-button size="mini" :icon="`${value?onIcon:offIcon}`" @click="updateBool">
    <span class="label-span" v-if="value">{{ onLabel }}</span>
    <span class="label-span" v-else>{{ offLabel }}</span>
  </el-button>
</template>

<script>
import { Button } from 'element-ui'
export default {
  name: "cardTableSwitch",
  components: { elButton: Button },
  props: {
    value: {
      type: Boolean,
      default: true,
    },
    /**@desc 打开状态下图标名称**/
    onIcon: {
      type: String,
      default: 'iconfont icon-dv-scroll-ranking-board',
    },
    /**@desc 关闭状态下图标名称**/
    offIcon: {
      type: String,
      default: 'iconfont icon-gongnengguanli',
    },
    /**@desc 打开状态下名称**/
    onLabel: {
      type: String,
      default: '列表',
    },
    /**@desc 关闭状态下名称**/
    offLabel: {
      type: String,
      default: '卡片',
    },
  },
  methods: {
    /**@desc 更新状态**/
    updateBool() {
      this.$emit('input', !this.value)
    }
  }
}
</script>

<style scoped>
.label-span {
  vertical-align: 1px;
}
</style>
